import React, { Component } from 'react'
// 引入图片要如下的方式
import avatar from './avatar.png'
import './index.css'

export default class App extends Component {
  state = {
    // hot: 热度排序  time: 时间排序
    tabs: [
      {
        id: 1,
        name: '热度',
        type: 'hot',
      },
      {
        id: 2,
        name: '时间',
        type: 'time',
      },
    ],
    active: 'time',
    list: [
      {
        id: 1,
        author: '刘德华',
        comment: '给我一杯忘情水',
        time: '2021-11-10 09:09:00',
        img: 'https://y.qq.com/music/photo_new/T001R300x300M000003aQYLo2x8izP.jpg?max_age=2592000',
        // 1: 点赞 0：无态度 -1:踩
        attitude: 1,
      },
      {
        id: 2,
        author: '周杰伦',
        comment: '听妈妈的话',
        time: '2021-12-11 09:09:00',
        img: 'https://y.qq.com/music/photo_new/T001R500x500M0000025NhlN2yWrP4.jpg?max_age=2592000',
        // 1: 点赞 0：无态度 -1:踩
        attitude: 0,
      },
      {
        id: 3,
        author: '陈奕迅',
        comment: '十年',
        time: '2021-10-11 10:09:00',
        img: 'https://y.qq.com/music/photo_new/T001R500x500M000003Nz2So3XXYek.jpg?max_age=2592000',
        // 1: 点赞 0：无态度 -1:踩
        attitude: -1,
      },
    ],
  }
  // 1. 绑定点击事件
  // 2. 把点击时候的 item.type 给 state.active
  handleTab(active) {
    return () => this.setState({ active })
  }
  // 更建议上面写法
  // handleTab = (active) => () => this.setState({ active })
  // 1. 绑定点击事件
  // 2. 点击的时候把 id 传到事件回调里面
  // 3. 事件回调里面根据 id 找到索引进行删除
  handleDel(id) {
    // !违背了数据的不可变性
    // this.state.list.splice(id, 1) // !错了
    /* const list = JSON.parse(JSON.stringify(this.state.list))
    // 先根据 id 找到索引，根据索引删除
    const idx = list.findIndex((item) => item.id === id)
    list.splice(idx, 1)
    this.setState({ list }) */
    this.setState({ list: this.state.list.filter((item) => item.id !== id) })
  }
  renderList() {
    const { state } = this
    return state.list.length === 0 ? (
      <h2>暂无留言</h2>
    ) : (
      state.list.map((item) => (
        <div key={item.id} className='list-item'>
          <div className='user-face'>
            <img className='user-head' src={item.img} alt='' />
          </div>
          <div className='comment'>
            <div className='user'>{item.author}</div>
            <p className='text'>{item.comment}</p>
            <div className='info'>
              <span className='time'>{item.time}</span>
              {/* 第 1 种写法 */}
              <span className={`like ${item.attitude === 1 ? 'liked' : ''}`}>
                {/* 第 2 种写法 */}
                {/* <span
          className={'like ' + (item.attitude === 1 ? 'liked' : '')}
        > */}
                {/* 第 2 种写法 */}
                {/* <span
          className={['like', item.attitude === 1 ? 'liked' : ''].join(
            ' '
          )}
        > */}
                <i className='icon'></i>
              </span>
              <span className={`hate ${item.attitude === -1 ? 'hated' : ''}`}>
                <i className='icon'></i>
              </span>
              <span
                className='reply btn-hover'
                onClick={() => this.handleDel(item.id)}
              >
                删除
              </span>
            </div>
          </div>
        </div>
      ))
    )
  }
  render() {
    const { state } = this
    return (
      <div className='App'>
        <div className='comment-container'>
          <div className='comment-head'>
            {/* //!#1 评论长度 */}
            <span>{state.list.length} 评论</span>
          </div>
          <div className='tabs-order'>
            <ul className='sort-container'>
              {/* //!#2 渲染 Tab 栏 */}
              {/* 当 item.type 等于 state.active 的时候，使用 on class */}
              {state.tabs.map((item) => (
                <li
                  key={item.id}
                  className={item.type === state.active ? 'on' : ''}
                  onClick={this.handleTab(item.type)}
                >
                  按{item.name}排序
                </li>
              ))}
            </ul>
          </div>
          <div className='comment-send'>
            <div className='user-face'>
              <img className='user-head' src={avatar} alt='' />
            </div>
            <div className='textarea-container'>
              <textarea
                cols={80}
                rows={5}
                placeholder='发条友善的评论'
                className='ipt-txt'
              ></textarea>
              <button className='comment-submit'>发表评论</button>
            </div>
            <div className='comment-emoji'>
              <i className='face'></i>
              <span className='text'>表情</span>
            </div>
          </div>
          <div className='comment-list'>{this.renderList()}</div>
        </div>
      </div>
    )
  }
}
